<template>
  <el-row>
    <el-menu collapse-transition="true" :default-active="activeIndex" :mode="mode">
      <el-submenu :index="i" v-for="(row,i) in menuList" :key="i" v-if="row.children.length>0">
        <template slot="title">
          <i v-html="row.iconDefault" class="iconfont"></i>
          <span>{{row.resourceName}}</span>
        </template>
        <el-menu-item
          @click="jump(row2.resourceUrl,row2.resourceName)"
          :index="i+'-'+j"
          v-for="(row2,j) in row.children"
          v-if="row2.children.length==0"
          :key="j"
        ><i v-html="row2.iconDefault" class="iconfont"></i> {{row2.resourceName}}
        </el-menu-item>
        <el-submenu
          :index="i+'-'+j"
          v-for="(row2,j) in row.children"
          :key="j"
          v-if="row2.children.length>0"
        >
          <template slot="title">
            <i v-html="row2.iconDefault" class="iconfont"></i>
            <span>{{row2.resourceName}}</span>
          </template>
          <el-menu-item
            :index="i+'-'+j+'-'+x"
            v-for="(row3,x) in row2.children"
            :key="x"
          >{{row3.resourceName}}
          </el-menu-item>
        </el-submenu>
      </el-submenu>
    </el-menu>
  </el-row>
</template>
<style>
</style>
<script>
  export default {
    name: 'HeaderMenu',
    data () {
      return {
        leftMenuList: [],
        defaultActive: '0',
      }
    },
    created () {
      console.log(this.mode)
    },
    methods: {},
    props: {
      menuList: {
        type: Array,
        default: [],
      },
      collapse: {
        type: Boolean,
        default: true
      },
      mode: {
        type: String,
        default: 'vertical',
      },
      backgroundColor: {
        type: String,
        default: '#304156'
      },
      textColor: {
        type: String,
        default: '#fff'
      },
      activeTextColor: {
        type: String,
        default: '#409eff'
      },
      direction: {
        type: String,
        default: 'top',
      }
    },
  }
</script>
